import { Component } from "react"

class Child extends Component {
  // state = {
  //   timer: null
  // }
  componentDidMount(){
    // this.timerId这个变量不需要涉及到页面的渲染，也不需要使用this.setState进行更新
    // 只需要一个临时变量，可以在多个生命周期函数之前访问即可，我们想到多个生命周期之前的this是通用的
    // 所以给this添加变量
    this.timerId = setInterval(() => {
      console.log('子组件的定时器');
    }, 1000);
  }
  componentWillUnmount() {
    console.log('子组件被卸载的时候执行的函数');
    clearInterval(this.timerId)
  }
  render() {
    return (
      <h4>我是子组件</h4>
    )
  }
}
// vue2的父子组件的生命周期函数的执行顺序
// 父组件3  b - c -bm   ---> 子4个 ---> 父组件的mounted
class Header extends Component {
  state = {
    count: 0
  }
  updateCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <>
        <h3>我是父组件--{this.state.count}</h3>
        <button onClick={this.updateCount}>count+1</button>
        { this.state.count > 3 ? (<div>{this.state.count}</div>) : <Child /> }
      </>
    )
  }
}

function App() {
  return (
    <>
      <Header />
    </>
  )
}

export default App